Rodrigo

Hi, Horizontal pinning is not supported since you're already pinning vertically, what you can do is create a timeline that has the ScrollTrigger configuration and add that particular animation at the end of it, since is the last horizontal section just combine the two demos you already have in place. Something like this: https://codepen.io/GreenSock/pen/JjqqOdL Hopefully this helps. Happy Tweening!

Hi, The second parameter should be either a DOM element or a selector, it could look like this: Flip.fit(".box-blue", ".box-green", { duration: 1, ease: "power1.inOut", absolute: true, }); But I'm not really sure about what you're trying to achieve, that's why I also suggested to check Flip's from() method as well and maybe instead of creating a single timeline for all the animations, just create a re-usable method that allows you to execute different GSAP instances in the first animations and the Flip animation. It would be really helpful a more clear and precise description of what you're trying to do and also I'd recommend you to just try to work the Flip animation since it seems the others are working the way you intend. Happy Tweening!

Hi, I think you are overcomplicating this quite a bit. This seems like a simpler approach IMHO: https://codepen.io/GreenSock/pen/jOooGvE Hopefully this helps. Happy Tweening!

Hi, Again this is mostly about the JS logic in your code and not really a GSAP related issue. This is mostly about keeping track of the elements on the plates more than anything else which, again, is not a GSAP related issue but a logic issue. You have to find the way to keep track of that, maybe a specific ID for each element and an array for each scale plate and the rectangle in order to keep track where the element is in order to show/hide it accordingly. Happy Tweening!

That's just in case you need to access the font faces loaded. In the case of getting weird behaviours when using SplitText with custom fonts, is basically a way to know that the fonts have been loaded and applied in the DOM before creating the SplitText instances, nothing more. Most of the time you just need something like this: document.fonts.ready.then(() => { // Create your SplitText and GSAP related instances here }); Based on the video you supply you might want to revert your SplitText instances and create them again on the resize event. Maybe debounce the resize handler for better performance. Hopefully this helps. Happy Tweening!

Hi, I'm not 100% sure that this can be achieved. I can assure you that the Inertia Plugin works with the Draggable part of the Horizontal Loop helper function, not the Observer part of the codepen Cassie created. For that you'll have to track the delta and velocity values the Observer Plugin reports, get the current index and use the toIndex() method provided by the helper function in order to move to a different index rather than the next one. You'll need to fiddle a bit with the math of this in order to get the next index value correctly, for that I'd recommend using the snap and wrap utility methods as well: https://gsap.com/docs/v3/GSAP/UtilityMethods/snap() https://gsap.com/docs/v3/GSAP/UtilityMethods/wrap() Hopefully this helps. Happy Tweening!

Sure thing! Anything is possible but this might require a bit of custom logic and tinkering with the HTML and CSS in order to get everything working as expected. Unfortunately this is a bit beyond the scope of the help we provide in these free forums, since we don't have the time resources to create custom demos for our users or solve complex logic issues. We offer paid consulting services and you can post in the Jobs & Freelance forums to get help there. Of course if another user wants to have a crack at this and create a working demo that's possible too, we just want to manage expectations, that's all. Happy Tweening!

Hi, You might need to track the state of the transition, meaning you can call the revert method after the animation has completed. Also this could be a case of proper cleanup not being done. Are you using our useGSAP hook in your setup? https://gsap.com/resources/React Hopefully this helps. Happy Tweening!

Hi, This demo has the logic you're looking for: https://codepen.io/GreenSock/pen/OJdvNpq Right here: ScrollTrigger.create({ trigger: "body", start: "top top", end: "max", onUpdate: (self) => { if (self.progress > 0.8 && self.direction > 0) { // Here update your state in React } } }); Just update the state property and keep the second useGSAP hook with the ScrollTrigger.refresh() call intact. Hopefully this helps. Happy Tweening!

Hi, Have you tried the document.fonts API? https://developer.mozilla.org/en-US/docs/Web/API/Document/fonts#doing_operation_after_fonts_are_loaded Happy Tweening!

Hi, The error you're getting is because your code is missing an argument. Flip's fit() method takes three arguments as stated in the docs: Parameters targetToResize: String | Element The DOM element that should be resized/moved. Can be selector text like ".my-class" or a reference to the Element itself. destinationTargetOrState: String | Element | FlipState The DOM element or FlipState that should be fit into. vars: Object The vars to use for the fit. This can contain standard tweening properties like ease, duration, onComplete, etc. as well as special settings like absolute, fitChild, scale, etc. But you're providing only two: Flip.fit(".box-blue", { targets: state, duration: 1, ease: "power1.out", absolute: true, scale: true }); Finally since you want to reparent the element, maybe Flip.from() might be an option that you could explore as well: https://gsap.com/docs/v3/Plugins/Flip/static.from() Hopefully this helps. Happy Tweening!

Hi @Baldax and welcome to the GSAP Forums! I'm afraid that your demo is not working since it seems to be missing a package named split type. On top of that you're using very old versions of GSAP and ScrollTrigger, so I would also recommend you to get them up-to-date as well. Please review your demo and once is actually working and it reflects the issue you're having, let us know so we can have a look at it. Happy Tweening!

Hi @Ali Ab, Isn't this thread related or an exact duplicate of this: We do our best to answer to all threads in less than 24 hours, so please don't create duplicated threads since it makes it harder to keep track. You'll get a fast answer regardless of the amount of threads you create. I already provided an answer in the other thread, so if it's OK with you we can keep our focus in that other thread. Happy Tweening!

As far as I know the Seamless Loop helper predicates in the fact that all the remainder elements will cover all the available space in it's parent when the first element is out of the view, which is not the case in your images. Honestly IDK how that could be worked around. As Cassie mentions this is something Jack came up with so he would be the one to say the final word on this subject, but if I recall correctly something similar to your situation has popped up in the forums in the past and I believe there is not a lot that can be done without duplicating the elements. Happy Tweening!

Definitely, but that could create some scroll jumps, you should look into the disable and enable methods: https://gsap.com/docs/v3/Plugins/ScrollTrigger/disable() https://gsap.com/docs/v3/Plugins/ScrollTrigger/enable() I'm not sure of what you're trying to do, but disabling and enabling, or killing a ScrollTrigger instance doesn't sound like the best approach in this case. Maybe pin the element using pinSpace false and use a second ScrollTrigger instance to tween the opacity. Unfortunately I don't have time to create a demo for you, especiallly considering that I'll be guessing what you're trying to do here. Hopefully this helps. Happy Tweening!